<template>
	<view>
		<u-navbar :is-back="true" :border-bottom="false" height="46" title="真题详情" title-color="#333" :title-size="36"
		 :title-bold="true">
			<view class="navbar-right" slot="right" @click="onShareType(0)">
				<view class="message-box right-item">
					<u-icon name="zhuanfa" size="38" style="margin-right: 30rpx;"></u-icon>
				</view>
			</view>
		</u-navbar>
		<u-gap height="20" bg-color="#F7F7F7"></u-gap>
		<view class="pradet_top">
			<view class="pardet_top_text">
				{{practice.title}}
			</view>
			<view class="pardet_data">
				<view class="pardet_label">
					<text>{{practice.tags}}</text>
					<text>{{practice.colname2}}</text>
				</view>
				<view class="pardet_ioc">
					<view class="details_tab_sc">
						<u-icon name="star" size="32" style="margin-right: 15rpx"></u-icon>{{practice.sccounts}}
					</view>
					<view class="details_tab_sc">
						<u-icon name="eye" size="32" style="margin-right: 15rpx;margin-left: 30rpx;"></u-icon>{{practice.counts}}
					</view>
				</view>
			</view>
		</view>
		<u-gap height="20" bg-color="#F7F7F7"></u-gap>
		<u-parse :html="practice.ncontent" style="padding: 30rpx;"></u-parse>
		<u-gap height="20" bg-color="#F7F7F7"></u-gap>
		<view class="details_more_text">
			更多培训内容
		</view>
		<common-list :atlascont="atlascont" style="padding-bottom: 84rpx;" @child-msg="getChildMsg"></common-list>
		<view class="details-more_box">
			<view class="details_tab">
				<view class="details_tab_sc" @click="GoCollection(3310,practice.id,practice.title,practice.wjlx)">
					<u-icon name="star" size="40" :color="iconColor" style="margin-right: 15rpx"></u-icon>收藏
				</view>
				<view class="details_tab_xz" @click="CopyCode">
					点击复制提取码并跳转下载
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { commonGet } from "@/api/commonapi.js"
	import CommonList from "@/components/common/CommonList.vue"
	import ShareMerge from "@/common/ShareMerge.js"
	import Collection from "@/common/Collection.js"
	export default {
		mixins: [ShareMerge, Collection],
		data() {
			return {
				id: 0,
				practice: [],
				stype: "4",
				spageid: "3310",
				title: "",
				atlascont: [],
				shareUrl: "",
				shareTitle: "",
				shareContent: "",
				shareImg: "",
				creatememid:"",
				img:"",
			}
		},
		async onLoad(options) {
			this.id = options.id
			await this.PraDetails(options.id)
			await this.Collection();
			if (this.$store.state.userIn) {
				this._creatememid = JSON.parse(this.$store.state.userIn).id
			}
		},
		methods: {
			async PraDetails(id) {
				let params = {
					cmd: 'nEdu_query_proc_ui',
					para: {
						id: id,
					}
				}
				const res = await this.$u.api.PraDetails(params)
				let reg = /src="/g;
				this.practice = res.Data
				this.practice.ncontent = this.practice.ncontent.replace(reg, 'src="' + this.baseUrl)
				this.title = this.practice.title
				this.img =res.Data.wjlx
				console.log(this.img)
				this.atlascont = res.Data.Datas5
				for (var value of this.atlascont.values()) {
					value.wjlx = this.baseUrl + value.wjlx
				}
				console.log(this.practice)

				this.shareTitle = this.practice.title
				this.shareContent = this.practice.ndesc
				this.shareImg =  this.baseUrl + this.practice.wjlx 
			},
			getChildMsg(msg) {
				// console.log(msg)
				this.$u.route('/pages/HomeLnner/PracticeDetails/PracticeDetails', {
					id: msg
				});
			},
			async CopyCode() {
				if (this.$store.state.token) {
					if(this.$store.state.userIn){
						var _creatememid = JSON.parse(this.$store.state.userIn).id
					}
					let params = {
						ak: this.$store.state.token,
						cmd: 'nEduDown_add_proc',
						para: {
							"pageid": "3310",
							"id": this.id,
							"nomsg": 1,
							"_creatememid":_creatememid
						}
					}
					const res = await this.$u.api.PraDetails(params)
					uni.setClipboardData({
						data: res.Data.bdmm,
						success: function() {
							plus.runtime.openURL(res.Data.bdlj)
							uni.showToast({
								title: '复制成功',
								duration: 2000,
								icon: 'none'
							});
						}
					});
				} else {
					this.$u.route('/pages/myuser/user/UserInfo')
				}
   
			}
		},
		components: {
			"common-list": CommonList,
		}
	}
</script>

<style scoped lang="scss">
	.pradet_top {
		padding: 30rpx 30rpx 35rpx 30rpx;

		.pardet_top_text {
			font-size: 32rpx;
			font-weight: 500;
			color: #000000;
			margin-bottom: 28rpx;
		}

		.pardet_data {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.pardet_label {
				font-size: 20rpx;
				color: #C40200;

				text {
					&:last-child {
						margin-left: 40rpx;
					}

					display: inline-block;
					padding: 6rpx;
					border: 1rpx solid #C40200;
					border-radius: 5px;
				}
			}

			.pardet_ioc {
				display: flex;
				color: #808080;
			}
		}
	}

	.details_more_text {
		padding: 40rpx 30rpx 0;
		font-size: 34rpx;
		font-weight: bold;
		color: #000000;
	}

	.details-more_box {
		background-color: #fff;
		padding: 10rpx 30rpx;

		.details_more_text {
			padding: 40rpx 30rpx 0;
			font-size: 34rpx;
			font-weight: bold;
			color: #000000;
		}

		.details_tab {
			padding: 0rpx 30rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 104rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 2rpx #e5e5e5 solid;

			.details_tab_sc {
				display: flex;
				font-size: 28rpx;
				color: #383838;
			}

			.details_tab_xz {
				padding: 20rpx 40rpx;
				background: #C40200;
				border-radius: 42rpx;
				color: #fff;
				text-align: center;
				font-size: 32rpx;
			}
		}
	}
</style>
